import React from 'react';
import '../static/EditActivity.scss';
import { Modal,List, Radio,DatePicker,Toast} from 'antd-mobile';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as homeActions from '../actions/home';
import ContentEditable from 'react-contenteditable';
import $ from '../utils/jquery-vendor';
import SnowCanvas from '../components/SnowCanvas/SnowCanvas';
import '../utils/snow-plugin';
import {formatDateTime} from '../utils/';
import { Link } from 'react-router-dom'


let buleTop = 'http://ovckjkwel.bkt.clouddn.com/zxbm_bule_top.jpg';
let redTop = 'http://ovckjkwel.bkt.clouddn.com/zxbm_red_top.jpg';
let greenTop = 'http://ovckjkwel.bkt.clouddn.com/zxbm_green_top.jpg';

const RadioItem = Radio.RadioItem;

const data2 = [
    { value: 'none', label: '无' },
    { value: 'snow', label: '雪花' },
    { value: 'leaf', label: '绿叶' },
    { value: 'flower', label: '花瓣' },
  ];

const data3 = [
    { value: 'red', label: '模板1（红）' },
    { value: 'bule', label: '模板2（蓝）' },
    { value: 'green', label: '模板3（绿）' },
  ];


/**
 * 编辑活动
 */
class EditActivity extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            modal1: false,
            modal2: false,
            modal3: false,
            info:{   //此处作用。编辑活动过后在新建活动时初始化上次编辑时更改的store数据
                id:0,
                template:'bule',
                effects:'none',
                m1Title:'火热活动进行中',
                m2Title:'产品描述',
                m2Content:'',
                m3Title:'活动规则',
                m3Content:'',
                m4Title:'领奖信息',
                m4Content:'领奖时间： 领奖电话：',
                m5Title:'机构介绍',
                m5Content:'',
                m6Title:'咨询电话',
                m7Content:'',
                formName:'',
                formPhone:'',
                formDiy1:'',
                formDiy2:'',
                formDiy3:'',
                formDiyCheck:[false,false,false], //表单是否必填
                startTime:'',
                endTime:'',
                title:'欢迎参加在线报名活动',
                number:'100', //最多人数
                Cost:0, //报名费用
                Deposit:0, //报名订金
            }
        }
    }

    componentDidMount() {
        if(this.props.match.params.id !=0){
            this.props.actions.getActivityDetail(this.props.match.params.id,()=>{
                $(".snow-canvas").snow();
            });
        }else{
            this.props.actions.valueChange('all',this.state.info);
        }
    }

    showModal = key => (e) => {
        // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
        // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }

    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }

    add(){
        let editer = document.getElementById('editer2');
        editer.focus();
        document.execCommand('InsertImage', false, 'https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=2495931960,2399539073&fm=85&s=5B84E60EA0624F1B1CC68B7C0300906B');
    }

    addVideo = ()=>{
        console.log("video");
        let editer = document.getElementById('editer2');
        editer.focus();
        document.execCommand('inserthtml', false, `<video controls="controls" src="http://pcad.video.baidu.com/cooper_video_5fee0a7ff3da03fb1f338d3c9e44e157.mp4"></video><p> </p>`);
    }

    addImgToM2Content = ()=>{
        // let newInfo = Object.assign({},this.state.info)
        // console.log(newInfo);
        // newInfo.m2Content = newInfo.m2Content+`<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=2495931960,2399539073&fm=85&s=5B84E60EA0624F1B1CC68B7C0300906B"/>`;
        // console.log('onChange', newInfo);
        // this.setState({
        //     info:newInfo
        // })
        let editer = document.getElementById('editer');
        editer.focus();
        document.execCommand('InsertImage', false, 'https://www.qiniu.com/assets/logo-white-18da5fcb02f4aa87dacbf4451a7356b6179baebc96ae77cf24f607c98d12d100.png');

        
        //document.execCommand('inserthtml', false, '<b>kjadshk</b>');

    }

    //保存
    save = ()=>{
        
        //formatDateTime
        let info = Object.assign({}, this.props.info)
        info.startTime = formatDateTime(info.startTime)
        info.endTime = formatDateTime(info.endTime)

        switch(info.template){
            case 'bule':
                info.topImg = buleTop;
                break;
            case 'red':
                info.topImg = redTop;
                break;
            case 'green':
                info.topImg = greenTop;
                break;
        }
        if(info.startTime == '' || info.endTime == ''){
            Toast.info('活动时间不能为空',2);
            return false;
        }
        if(new Date(info.endTime) <= new Date(info.startTime)){
            Toast.info('活动结束时间应大于开始时',2);
            return false;
        }
        
        console.log("this.props.info",info)
        this.props.actions.addActivity(info);
    }

    valueChange = (type,e)=>{
        this.props.actions.valueChange(type,e);
    }

    templateChange = (template)=>{
        this.setState({
            modal3: false,
        });

        this.props.actions.valueChange('template',template);
    }

    formCheckChange = (e)=>{

        this.props.actions.valueChange('formCheck',e);

    }

    effectsChange = (effects) =>{
        this.setState({
            modal2: false,
        },()=>{
            $(".snow-canvas").snow();
        });

        this.props.actions.valueChange('effects',effects);
    }

    render() {

        let logo;
        if(this.props.info.template == 'red'){
            logo = redTop;
        }
        if(this.props.info.template == 'bule'){
            logo = buleTop;
        }
        if(this.props.info.template == 'green'){
            logo = greenTop;
        }

        return (
            <div className={`EditActivity ${this.props.info.template}`}>
                
                <div className="top_fixed">
                    <div className="tfBtn" onClick={this.showModal('modal1')}><i className="fa fa-music fa-fw ripple"></i>选择音乐</div>
                    <div className="tfBtn" onClick={this.showModal('modal2')}><i className="fa fa-star fa-fw fa-spin"></i>选择特效</div>
                    <div className="tfBtn" onClick={this.showModal('modal3')}><i className="fa fa-navicon fa-fw hb"></i>选择模板</div>
                </div>
                <div className="top">
                    <img className="top_img" src={logo}/>
                    <div className="picBtn1"><i className="fa fa-file-picture-o fa-fw"></i>默认图</div>
                    <div className="picBtn2"><i className="fa fa-file-picture-o fa-fw"></i>上传图片</div>
                </div>
            
                <div className="m1">
                        <span className="ribbon5"><input className="m1_TitleInput" type="text" onChange={this.valueChange.bind(this,'m1Title')} value={this.props.info.m1Title}/></span>        
                        <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多8个字</div>
                        {/*
                        <span className="s1">火热进行中</span>
                        <span className="s2"></span>
                        <span className="s3"></span>
                        */}
                    <div className="m1Input">
                        <div className="m1t1">活动开始时间：</div>

                        <DatePicker className="forss"
                            mode="datetime"
                            onChange={this.valueChange.bind(this,'startTime')}
                        >
                            <input className="m1t2" type="text" value={formatDateTime(this.props.info.startTime)}/>
                        </DatePicker>
                    </div>
                    <div className="m1Input">
                        <div className="m1t1">活动结束时间：</div>
                        <DatePicker className="forss"
                            mode="datetime"
                            onChange={this.valueChange.bind(this,'endTime')}
                        >
                            <input className="m1t2" type="text" value={formatDateTime(this.props.info.endTime)}/>
                        </DatePicker>
                    </div>
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>活动到期后无法在修改时间，请牢记！</div>
                    <div className="m1t1">活动名称：</div>
                    <textarea className="text" rows="3" cols="20" onChange={this.valueChange.bind(this,'title')} value={this.props.info.title}></textarea>
                </div>
                
                <div className="configDiv">
                    <div className="configIpnt ">
                        <div className="m1t1">人数上限：</div>
                        <input className="m1t2" type="text" onChange={this.valueChange.bind(this,'number')} value={this.props.info.number}/>人
                        <p>（人数达到上限，则无法报名，最多支持10000人）</p>
                    </div>
                    
                    <div className="configIpnt">
                        <div className="m1t1">报名费用:</div>
                        <input className="m1t2" type="text" onChange={this.valueChange.bind(this,'Cost')} value={this.props.info.Cost}/>元
                        <p>0表示无需活动费用</p>
                    </div>

                    <div className="configIpnt" >
                        <div className="m1t1">报名（订金）：</div>
                        <input className="m1t2" type="text" onChange={this.valueChange.bind(this,'Deposit')} value={this.props.info.Deposit}/>元
                        <p>（报名诚意金建议设置不高于100元，可以为0，提现时会扣除10%手续费）移除用户全额退款</p>
                    </div>
                </div>
                
                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" onChange={this.valueChange.bind(this,'m2Title')} value={this.props.info.m2Title}/></span>
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多6个字</div>

                    <ContentEditable id="editer" className="contentedit" disabled={false} onChange={this.valueChange.bind(this,'m2Content')} html={this.props.info.m2Content}/>
                    <div className="addImgBtn" onClick={this.addImgToM2Content}><i className="fa fa-file-picture-o fa-fw"></i>添加图片</div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" onChange={this.valueChange.bind(this,'m3Title')} value={this.props.info.m3Title}/></span>   
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多6个字</div>
                    <textarea className="text" rows="3" cols="20" onChange={this.valueChange.bind(this,'m3Content')} value={this.props.info.m3Content}></textarea>
                </div>
                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" onChange={this.valueChange.bind(this,'m4Title')} value={this.props.info.m4Title}/></span>   
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多6个字</div>
                    <textarea className="text" rows="3" cols="20" onChange={this.valueChange.bind(this,'m4Content')} value={this.props.info.m4Content}></textarea>
                </div>
                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" onChange={this.valueChange.bind(this,'m5Title')} value={this.props.info.m5Title}/></span>   
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多6个字</div>
                    <ContentEditable id="editer2" className="contentedit" disabled={false} onChange={this.valueChange.bind(this,'m5Content')} html={this.props.info.m5Content}/>
                    <div className="addImgBtn" onClick={this.add}><i className="fa fa-file-picture-o fa-fw"></i>添加图片</div>
                    <div className="addImgBtn" onClick={this.addVideo}><i className="fa fa-video-camera fa-fw"></i>添加视频（最多添加5个视频）</div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value="咨询电话"/></span>   
                    <div className="tips1"><i className="fa fa-hand-o-up fa-fw"></i>版块名称可以修改，最多6个字</div>
                    <div className="IconInput">
                        <i className="fa fa-phone fa-fw"></i>
                        <input className="phoneInput" type="text" />
                    </div>
                    <p>客户可以通过此电话号码咨询活动事宜，建议留下手机号码，保持手机畅通</p>
                    {/*<div className="addImgBtn" onClick={this.add}><i className="fa fa-map-marker fa-fw"></i>选择位置</div>*/}
                </div>

                <div className="m1 m1data">
                    <span className="ribbon5">信息收集设置</span>   
                    <p><i className="fa fa-exclamation-triangle fa-fw"></i>姓名和手机号为默认必填项，不可修改</p>
                    <p><i className="fa fa-exclamation-triangle fa-fw"></i>自定义项为空则不显示，最多可填6个字</p>
                    <p><i className="fa fa-exclamation-triangle fa-fw"></i>如有用户报名，此内容不可再做任何修改</p>
                    <div className="IconInput">
                        <i className="fa fa-lock fa-fw"></i>
                        <input className="phoneInput" type="text" placeholder="姓名" onChange={this.valueChange.bind(this,'formName')} value={this.props.info.formName}/>
                        <label className="lb">
                            <input className="checkbox" type="checkbox" checked={true}/>
                            <span className="checkboxspan"></span>
                            <span className="btx">必填项</span>
                        </label>
                    </div>
                    <div className="IconInput">
                        <i className="fa fa-lock fa-fw"></i>
                        <input className="phoneInput" type="text" placeholder="手机号码" onChange={this.valueChange.bind(this,'formPhone')} value={this.props.info.formPhone}/>
                        <label className="lb">
                            <input className="checkbox" type="checkbox" checked={true}/>
                            <span className="checkboxspan"></span>
                            <span className="btx">必填项</span>
                        </label>
                    </div>
                    <div className="IconInput">
                        <input className="phoneInput" type="text"  placeholder="请填写要收集的信息名称"  onChange={this.valueChange.bind(this,'formDiy1')} value={this.props.info.formDiy1}/>
                        <label className="lb">
                            <input className="checkbox" type="checkbox" value="0" onChange={this.formCheckChange}/>
                            <span className="checkboxspan"></span>
                            <span className="btx">必填项</span>
                        </label>
                    </div>
                    <div className="IconInput">
                        <input className="phoneInput" type="text"  placeholder="请填写要收集的信息名称"  onChange={this.valueChange.bind(this,'formDiy2')} value={this.props.info.formDiy2}/>
                        <label className="lb">
                            <input className="checkbox" type="checkbox" value="1" onChange={this.formCheckChange}/>
                            <span className="checkboxspan"></span>
                            <span className="btx">必填项</span>
                        </label>
                    </div>
                    <div className="IconInput">
                        <input className="phoneInput" type="text"  placeholder="请填写要收集的信息名称"  onChange={this.valueChange.bind(this,'formDiy3')} value={this.props.info.formDiy3}/>
                        <label className="lb">
                            <input className="checkbox" type="checkbox" value="2" onChange={this.formCheckChange}/>
                            <span className="checkboxspan"></span>
                            <span className="btx">必填项</span>
                        </label>
                    </div>
                </div>

                <div className="footBtn">
                    <div className="fbT1" onClick={this.privew}>预览活动</div>
                    <div className="fbT2" onClick={this.save}>保存活动</div>
                </div>

                <div className="rightBtn">
                    <Link to={'/Home'}>
                        <div className="rbT1">个人<br/>中心</div>
                    </Link>
                    <Link to={'/MyActivity'}>
                        <div className="rbT1">活动<br/>列表</div>
                    </Link>
                </div>
                <Modal
                    title="选择音乐"
                    transparent
                    visible={this.state.modal1}
                    onClose={this.onClose('modal1')}
                    footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                >
                    这是内容...<br />
                    这是内容...<br />
                </Modal>

                <Modal
                    title="选择特效"
                    transparent
                    visible={this.state.modal2}
                    onClose={this.onClose('modal2')}
                    >
                    <List>
                        {data2.map(i => (
                        <RadioItem key={i.value} checked={this.props.info.effects === i.value} onChange={() => this.effectsChange(i.value)}>
                            {i.label}
                        </RadioItem>
                        ))}
                    </List>
                </Modal>

                <Modal
                    title="选择模板"
                    transparent
                    visible={this.state.modal3}
                    onClose={this.onClose('modal3')}
                >
                    <List>
                        {data3.map(i => (
                        <RadioItem key={i.value} checked={this.props.info.template === i.value} onChange={() => this.templateChange(i.value)}>
                            {i.label}
                        </RadioItem>
                        ))}
                    </List>
                </Modal>
                {this.props.info.effects != 'none' ? <SnowCanvas type={this.props.info.effects}/> : []} 
            </div>  
        )
    }
}


const mapStateToProps = (state) => ({
    userInfo: state.data.userInfo,
    info: state.data.info,
});

const mapDispatchToProps = (dispatch) => {
  return {
    actions:bindActionCreators(homeActions, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(EditActivity);